<template>
  <div class="admin">
    <div class="nav-menu" :style="!collapsed?'width: 256px':''">
      <!-- 左边导航栏 -->
      <div class="leftnavWrapper">
        <leftnav :collapsed="collapsed" :user="user"></leftnav>
      </div>
    </div>
    <div class="content">
      <content-header :currentRoute="currentRoute" @toggleCollapsed="toggleCollapsed" :user="user"></content-header>
      <div class="tag-nav-wrapper">
        <div class="tags-nav">
          <div>
            <a-tag @click="clickTag('home')" :color="currentRoute.name=='home'?'blue':''">首页</a-tag>
            <a-tag
              v-for="tag in  tags"
              :key="tag.route"
              @click="clickTag(tag.route)"
              closable
              @close="closeTag(tag.route)"
              :color=" currentRoute.name == tag.route?'blue':''"
            >{{tag.name}}</a-tag>
          </div>
        </div>
      </div>
      <div class="content-body-wrapper">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
import storageUtil from "../../utils/storageUtil";
import leftnav from "../../components/LeftNav/LeftNav";
import contentheader from "../../components/Header/Header";
export default {
  data() {
    return {
      tags: [
        // { route: "user", name: "用户管理" },
        // { route: "role", name: "角色管理" }
      ],
      user: {}, //保存当前用户信息
      //菜单栏是否为最小化
      collapsed: false,
      //当前路由信息
      currentRoute: { name: "home" }
    };
  },
  watch: {
    $route(newV, oldV) {
      var routeName = newV.meta.desc;
      var route = newV.name;
      var status = false;
      if (routeName) {
        this.tags.forEach(tag => {
          // status = tag.route == route ? true : false;
          if(tag.route == route){
              status = true
          }
        });
        if (!status) {
          this.tags.push({ route, name: routeName });
        }
      }
      console.log(newV);
      this.currentRoute = newV;
    }
  },
  methods: {
    closeTag(route){  //删除标签
    var index 
    this.tags.forEach((tag,i)=>{
      if(tag.route == route){
        index = i
      }
    })
    this.tags.splice(index,1)
    var length = this.tags.length
    // this.$route.push({name:this.tags[length]})
    },
    clickTag(routeName) {   //点击标签页面跳转
      console.log("clickTag")
      this.$router.push({ name: routeName });
    },
    preventDefault(e) {
      e.preventDefault();
      console.log("Clicked! But prevent default.");
    },
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
    }
  },
  created() {
    this.user = storageUtil.getUser();
  },
  components: {
    leftnav,
    "content-header": contentheader
  }
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
.admin {
  display: flex;
  height: 100%;

  .nav-menu {
    user-select: none;
    background: rgb(0, 21, 41);
  }

  .content {
    width: 100%;
    overflow: scroll;

    .leftnavWrapper {
      height: 7%;
    }

    .tag-nav-wrapper {
      height: 7%;
      padding: 14px;
      background: #f0f0f0;

      .tags-nav {
        position: relative;
        border-top: 1px solid #f0f0f0;
        border-bottom: 1px solid #f0f0f0;
        user-select: none;
      }
    }

    .content-body-wrapper {
      background-color: rgb(240, 242, 245);
      height: 85%;
      padding: 0 14px 0 14px;
    }
  }
}
</style>

